<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 职业指导简介 -->
      <el-col :span="24">
        <el-card shadow="hover" class="intro-card">
          <div slot="header" class="card-header">
            <span><i class="el-icon-guide"></i> 职业生涯指导简介</span>
          </div>
          <div class="intro-content">
            <p>欢迎使用职业生涯指导系统！本系统旨在帮助高考学生：</p>
            <ul>
              <li>了解自己的职业兴趣和能力特点</li>
              <li>探索适合自己的职业方向</li>
              <li>根据职业规划选择合适的高校和专业</li>
              <li>为未来的职业发展做好准备</li>
            </ul>
            <p>请选择下方功能开始使用！</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 功能卡片区域 -->
      <el-col :lg="8" :md="12" :sm="24">
        <el-card shadow="hover" class="feature-card">
          <div class="feature-icon">
            <i class="el-icon-user"></i>
          </div>
          <h3 class="feature-title">职业兴趣测评</h3>
          <p class="feature-desc">基于霍兰德职业兴趣理论，帮助你了解自己的职业兴趣类型和适合的职业方向。</p>
          <el-button type="primary" plain>开始测评</el-button>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12" :sm="24">
        <el-card shadow="hover" class="feature-card">
          <div class="feature-icon">
            <i class="el-icon-office-building"></i>
          </div>
          <h3 class="feature-title">职业百科</h3>
          <p class="feature-desc">探索各行各业的工作内容、发展前景、所需技能和推荐专业。</p>
          <el-button type="primary" plain>开始探索</el-button>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="12" :sm="24">
        <el-card shadow="hover" class="feature-card">
          <div class="feature-icon">
            <i class="el-icon-connection"></i>
          </div>
          <h3 class="feature-title">专业与职业匹配</h3>
          <p class="feature-desc">了解各类专业对应的职业方向，根据职业目标选择合适的大学专业。</p>
          <el-button type="primary" plain>查看匹配</el-button>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="card-header">
            <span><i class="el-icon-data-analysis"></i> 热门职业就业前景</span>
          </div>
          <div id="careerProspectChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "CareerGuidance",
  data() {
    return {
      careerProspectChart: null
    };
  },
  mounted() {
    this.initCharts();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCharts);
    if (this.careerProspectChart) {
      this.careerProspectChart.dispose();
    }
  },
  methods: {
    initCharts() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('careerProspectChart');
        if (chartDom) {
          this.careerProspectChart = echarts.init(chartDom);
          this.updateCareerProspectChart();
          
          // 监听窗口大小变化
          window.addEventListener('resize', this.resizeCharts);
        }
      });
    },
    
    resizeCharts() {
      if (this.careerProspectChart) {
        this.careerProspectChart.resize();
      }
    },
    
    updateCareerProspectChart() {
      // 模拟数据
      const careers = [
        '人工智能工程师', '数据科学家', '云计算专家', '网络安全工程师', 
        '金融分析师', '医疗技术人员', '新能源工程师', '教育咨询师', 
        '跨境电商专员', '内容创作者'
      ];
      
      const salaryData = [28000, 25000, 22000, 19000, 17000, 16000, 15000, 13000, 12000, 10000];
      const growthData = [15, 12, 10, 8, 7, 6, 6, 5, 5, 4];
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const salary = params[0].value;
            const growth = params[1].value;
            return `${params[0].name}<br/>
                    平均月薪: ${salary}元<br/>
                    年增长率: ${growth}%`;
          }
        },
        legend: {
          data: ['平均月薪(元)', '年增长率(%)']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            name: '平均月薪(元)',
            min: 0,
            max: 30000,
            position: 'bottom',
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '增长率(%)',
            min: 0,
            max: 20,
            position: 'top',
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        yAxis: {
          type: 'category',
          data: careers,
          axisLabel: {
            interval: 0
          }
        },
        series: [
          {
            name: '平均月薪(元)',
            type: 'bar',
            data: salaryData,
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: '年增长率(%)',
            type: 'line',
            xAxisIndex: 1,
            data: growthData,
            itemStyle: {
              color: '#67C23A'
            },
            lineStyle: {
              width: 2
            },
            symbol: 'circle',
            symbolSize: 8
          }
        ]
      };
      
      this.careerProspectChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  
  .card-header {
    display: flex;
    align-items: center;
    
    i {
      margin-right: 5px;
      color: #409EFF;
    }
  }
  
  .intro-card {
    margin-bottom: 20px;
    
    .intro-content {
      line-height: 1.6;
      
      ul {
        padding-left: 20px;
        margin: 10px 0;
      }
    }
  }
  
  .feature-card {
    height: 230px;
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    
    &:hover {
      transform: translateY(-5px);
    }
    
    .feature-icon {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: #ecf5ff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
      
      i {
        font-size: 30px;
        color: #409EFF;
      }
    }
    
    .feature-title {
      font-size: 18px;
      margin: 0 0 10px 0;
    }
    
    .feature-desc {
      color: #606266;
      margin-bottom: 15px;
      height: 40px;
    }
  }
}
</style> 